<template>
	<view class="currentCom" v-if="show" :animation="animationData">
		<view class="wrap">
			<view class="op-item" v-for="item in opList" @click="itemClick(item)">
				<u-icon :name="item.icon" size="40rpx"></u-icon>
				<text>{{item.label}}</text>
			</view>
		</view>

		<view class="mask" @click.stop="$emit('click',false)" @touchmove.stop=''></view>
	</view>
</template>

<script>
	export default {
		name: "popupMenu",
		model: {
			prop: 'show',
			event: 'click'
		},
		props: {
			show: {
				type: Boolean,
				default: false
			}
		},
		watch: {
			show() {
				console.log('show')
				var animation = uni.createAnimation({
					duration: 500,
					timingFunction: 'ease',
				})

				this.animation = animation
				animation.opacity(1).step()
				this.animationData = animation.export()

			}
		},
		data() {
			return {
				opList: [{
						label: '添加好友',
						icon: 'man-add'
					}, {
						label: '扫一扫',
						icon: 'scan'
					},
					{
						label: '玛卡巴卡',
						icon: 'scan'
					},
					{
						label: '铁甲小宝',
						icon: 'scan'
					},
					{
						label: '收付款',
						icon: 'scan'
					},
					{
						label: '你瞅啥',
						icon: 'scan'
					},
					{
						label: '瞅你咋地',
						icon: 'scan'
					}
				],
				animationData: {}
			};
		},
		methods: {
			itemClick(item) {
				this.$emit('popupMenuClickItem', item)
			}
		}
	}
</script>

<style lang="scss">
	.currentCom {
		// height: 400rpx;
		// width: 400rpx;
		// border: 1px solid rgba(127, 127, 127, .4);
		// background-color: #fff;
		// border-radius: 15rpx;
		// position: absolute;
		// // top: 400rpx;
		// right: -10rpx;
		// z-index: 99;

		// &:before {
		// 	content: '';
		// 	// border: 1px solid;
		// 	height: 20rpx;
		// 	width: 20rpx;
		// 	display: inline-block;
		// 	position: absolute;
		// 	top: -14rpx;
		// 	right: 20rpx;
		// 	transform: rotateZ(45deg);
		// 	border-top: 1px solid rgba(127, 127, 127, .4);
		// 	border-left: 1px solid rgba(127, 127, 127, .4);
		// 	background-color: #fff;
		// }
		transition: all .25s linear;
		opacity: 0;
	}

	.wrap {
		// height: 400rpx;
		width: 285rpx;
		// border: 1px solid rgba(127, 127, 127, .4);
		background-color: #fff;
		border-radius: 15rpx;
		position: absolute;
		// top: 400rpx;
		right: -10rpx;
		z-index: 99;

		&:before {
			content: '';
			// border: 1px solid;
			height: 25rpx;
			width: 25rpx;
			display: inline-block;
			position: absolute;
			top: -12rpx;
			right: 20rpx;
			transform: rotateZ(45deg);
			// border-top: 1px solid rgba(127, 127, 127, .4);
			// border-left: 1px solid rgba(127, 127, 127, .4);
			background-color: #fff;
		}
	}

	.op-item {
		// border: 1px solid;
		display: flex;
		padding: 20rpx 0;
		margin: 0 20rpx;
		font-size: 30rpx;
		align-items: center;

		text {
			margin: 0 30rpx;
		}

		&:not(:last-child) {
			border-bottom: 1px solid rgba(127, 127, 127, .2);
		}
	}

	.mask {
		background: rgba($color: #000000, $alpha: .2);
		height: 100vh;
		width: 100vw;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 10;
	}
</style>
